
@mixin prod-thumb($w: 3) {
  .edg-t, .edg-r, .edg-b, .edg-l {
    position: absolute;
    transition: all .3s ease-in;
  }
  .edg-r,.edg-l{
    transition-delay:.3s;
  }
  .edg-t {
    width: 0px;
    height: $w;
    top: 0;
    left: 0;
    background: #fff;
  }
  .edg-r {
    width: $w;
    height: 0px;
    right: 0;
    top:0;
    background: #fff;
  }
  .edg-b {
    width: 0px;
    height: $w;
    bottom: 0;
    right: 0;
    background: #fff;
  }
  .edg-l {
    width: $w;
    height: 0px;
    left: 0;
    bottom: 0;
    background: #fff;
  }
  &:hover,&.active {
    .edg-t {
      width: 100%;
    }
    .edg-r {
      height: 100%;
    }
    .edg-b {
      width: 100%;
    }
    .edg-l {
      height: 100%;
    }
  }
}

#products{
  background:url(../images/2.jpg) no-repeat center center;
  .prod-txt{
    margin-top: 100px;
  }
  .prod-gallery{
    width:100%;
    height: 100%;
    position: relative;
    
    .pod{
      color:#333;
      background:#fff;
      position: absolute;
      width:480px;
      height: 260px;
      left: 200px;
      @include prod-thumb(3px);
      overflow: hidden;
      .c{
        text-align: center;
        margin-top:40px;
        .category{
          font-size:18px;
          margin:0 10px;
          cursor: pointer;
          display: inline-block;
          line-height: 30px;
          &:hover,&.active{
            color:#cc5d29;
            border-bottom:2px solid #cc5d29;
          }
          
        }
      }
      .sub-c{
        text-align: center;
        font-size:14px;
        margin-top:20px;
        .sub-l{
          display: inline-block;
          line-height: 2em;
          cursor: pointer;
          span{
            display: inline-block;
            border: 1px solid transparent;
            cursor: pointer;
            width:80px;
          }
          img{
            display: block;
            opacity: 0;
            width:100%;
            @include transition(all 1s);

          }
          &:hover,&.active{
            span{
              border:1px solid #333;
            }
            img{
              opacity: 0.99;
            }

          }
        }
      }
      .tips{
        width: 200px;
        font-size: 12px;
        text-align: center;
        margin: 0 auto;
        margin-top: 10px;
        .t{
          margin-bottom:10px;
          font-size:12px;
        }
        a.l{
          display: inline-block;
          cursor: pointer;
          margin:0 10px;
          background:url(../images/arr-l-s.png) no-repeat;
          width:11px;
          height: 24px;
          &:hover{
            background:url(../images/arr-l-s-a.png) no-repeat;
          }
        }
        a.r{
          display: inline-block;
          cursor: pointer;
          margin:0 10px;
          background:url(../images/arr-r-s.png) no-repeat;
          width:11px;
          height: 24px;
          &:hover{
            background:url(../images/arr-r-s-a.png) no-repeat;
          
          }
        }
      }
    }
  }
}